<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="renderer" content="webkit|ie-comp|ie-stand"/>
    <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE">
    <title>课程-任务</title>

    <%@ include file="/common/commonLib.jsp" %>
    <link rel="stylesheet" type="text/css" href="<c:url value='/css/courseTaskEdit.css'/>"/>
    <link rel="stylesheet" type="text/css" href="<c:url value='/css/common-main.css'/>"/>
    <link rel="stylesheet" type="text/css" href="<c:url value='/wangEditor/dist/css/wangEditor.css'/>"/>
    <link rel="stylesheet" type="text/css" href="<c:url value='/css/checkboxcss/inserthtml.com.radios.css'/>"/>
    <link rel="stylesheet" type="text/css" href="<c:url value='/css/courserTaskAnalysis.css'/>"/>
    <link rel="stylesheet" type="text/css" href="<c:url value='/css/taskAnalysis.css'/>"/>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="<c:url value='/js/taskEdit.js'/>" type="text/javascript" charset="utf-8"></script>
    <script src="../js/echarts.js"></script>
    <style type="text/css">/* Chart.js */
    @-webkit-keyframes chartjs-render-animation{from{opacity:0.99}to{opacity:1}}@keyframes chartjs-render-animation{from{opacity:0.99}to{opacity:1}}.chartjs-render-monitor{-webkit-animation:chartjs-render-animation 0.001s;animation:chartjs-render-animation 0.001s;}</style>
</head>
<body>
<div class="container-fluid main">
    <div class="row">
        <div class="col-md-12">
            <%@include file="/common/header.jsp" %>
        </div>
        <div class="col-md-12">
            <%@include file="common/courseHeader.jsp" %>
        </div>
        <div class="col-md-12">
            <div class="row">
                <div class="col-md-3">
                    <%@include file="common/courseLeft.jsp" %>
                </div>
                <div class="col-md-9">
                    <div class="row">
                        <div class="col-md-12">
                            <%@include file="common/courseNavbar.jsp" %>
                        </div>

                        <div class="col-md-12">
                            <div class="tab-nav">
                                <a id="href1" class="front-nav" title="返回任务首页">任务首页
                                </a>&nbsp;>&nbsp;<a id="href2" href="javascript:history.back(-1)" class="back-nav"></a><span class="back-nav"> > 任务分析</span>
                            </div>
                            <div class="col-md-12">
                                <div class="page-header" style="margin: 0px;">
                                    <h3 style="text-align: center;">
                                        任务分析
                                    </h3>
                                </div>
                                <p class="clearfix mb20">

                                </p>
                                <div class="widget">
                                    <div class="widget-content" style="margin: 0;padding: 0;background: whitesmoke !important;">
                                        <div class="col-md-12">
                                            <div class="page-header clearfix">
                                                <div class="pull-right">
                                                    <div class="stats-box-title">学生数</div>
                                                    <div class="stats-box-all-info">
                                                        <i class="icon-user" style="color:#3366cc;">

                                                        </i> ${allStuNum}
                                                    </div>
                                                </div>
                                                <div class="pull-right mr20">
                                                    <div class="stats-box-title">学科</div>
                                                    <div class="stats-box-all-info">
                                                        <i class="icon-book" style="color:#F30">

                                                        </i> ${courseName}
                                                    </div>
                                                </div>
                                                <%--                                                <span class="pull-right text-h">共检测到</span>--%>
                                            </div>
                                        </div>
                                        <div class="col-md-12">
                                            <div class="panel panel-default">
                                                <div class="panel-body">
                                                    <div class="pull-left mb20">
                                                        <span class="text-muted"><i class="iconfont icon-dengpao"></i>Tips: 标准差：用来描述样本的离散程度，越大说明离散度越大，即高分与低分比较多。</span>
                                                    </div>
                                                    <div class="col-md-12">
                                                        <div class="widget widget-table action-table mt20">
                                                            <!-- /widget-header -->
                                                            <div class="widget-content">
                                                                <div class="table-responsive">
                                                                    <table class="table table-striped table-bordered">
                                                                        <thead>
                                                                        <tr>
                                                                            <th>
                                                                                平均分</th>
                                                                            <th>
                                                                                最高分</th>
                                                                            <th>
                                                                                最低分</th>
                                                                            <th>
                                                                                中位数</th>
                                                                            <th>
                                                                                标准差</th>
                                                                        </tr>
                                                                        </thead>
                                                                        <tbody>
                                                                        <tr>
                                                                            <td> ${courseAvg} </td>
                                                                            <td> ${courseTop} </td>
                                                                            <td> ${courseLow} </td>
                                                                            <td> ${courseMid} </td>
                                                                            <td> ${courseStd} </td>
                                                                        </tr>
                                                                        </tbody>
                                                                    </table>
                                                                </div>
                                                                <div class="table-responsive">
                                                                    <table class="table table-striped table-bordered">
                                                                        <thead>
                                                                        <tr>
                                                                            <th> 班级</th>
                                                                            <th>
                                                                                排名</th>
                                                                            <th>
                                                                                平均分</th>
                                                                            <th>
                                                                                中位数</th>
                                                                            <th>
                                                                                标准差</th>
                                                                        </tr>
                                                                        </thead>
                                                                        <tbody id="detailAnalysis">

                                                                        </tbody>
                                                                    </table>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-12">
                                                        <div class="col-md-12" style="height:500px;display: flex;justify-content:space-between;">
                                                            <div class="col-md-6" id="graph1" style="height:500px">

                                                            </div>
                                                            <div class="col-md-6" id="graph2" style="height:500px;">

                                                            </div>
                                                        </div>
                                                        <div class="col-md-12" style="height:500px;display: flex;justify-content:space-between;">
                                                            <div class="col-md-6" id="graph3" style="height:500px">

                                                            </div>
                                                            <div class="col-md-6" id="graph4" style="height:500px">

                                                            </div>
                                                        </div>
                                                        <div class="col-md-12" style="height:500px;display: flex;justify-content:space-between;">
                                                            <div class="col-md-6" id="graph5" style="height:500px">

                                                            </div>
                                                            <div class="col-md-6"id="graph6" style="height:500px">

                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>

    </div>


</div>
<%@include file="/common/footer.jsp" %>
<script src="<c:url value='/wangEditor/dist/js/wangEditor.js'/>" type="text/javascript" charset="utf-8"></script>
</body>
<script>
    <%--var courseName = '${courseName}';--%>
    <%--console.log(courseName)--%>
    var data =${data};
    // data = JSON.parse(data)
    var courseName = '${courseName}';

    // console.log(data);
    var classDatas = ${classDatas};
    // console.log(classDatas)
    classDatas.sort(function (a,b) {
        return b.avg - a.avg;
    })
    // console.log(classDatas)
    if(classDatas.length>0){
        var detailAnalysis = $('#detailAnalysis')
        var str = "";
        for(let i=0;i<classDatas.length;i++){
            str += ("<tr>");
            str += ("<td>") + classDatas[i].className + ("</td>");
            str += ("<td>") + (i+1) + ("</td>");
            str += ("<td>") + parseFloat(classDatas[i].avg) + ("</td>");
            str += ("<td>") + parseFloat(classDatas[i].mid) + ("</td>");
            str += ("<td>") + parseFloat(classDatas[i].std) + ("</td>");
            str += ("</tr>");
        }
        $("#detailAnalysis").append(str);
    }

    var allStuDatas = ${allStuDatas};
    var classStuDatas = ${classStuDatas};

    $(document).ready(function () {

        if (data.status != "success") {
            alert(data.message);
            return;
        }
        // console.log(data.data)
        // $("#analysis-task-btn").click(function () {
        //     window.location.href =
        // })
        //删除任务
        $("#delete-task-btn").click(function () {
            var id = $("input[name='detailTaskId']").val();
            if (window.confirm("您确定要删除吗?")) {

                $.post(CONTEXT_PATH + "task/ajaxDelete", "id=" + id, function (data) {
                    if (data.status == "success") {

                        layer.msg("删除成功");
                        window.location = CONTEXT_PATH + "task/list?courseId=" + data.data.task.courseId
                    } else {
                        layer.msg("删除失败");
                    }
                });

            } else {

            }
        })

        $("#task").css("color", "#00b43c");
        $("#answer-box").hide();
        changeUrl(data.data.courseId);
        fetchCourse(data.data.courseId);
        initDetail(data.data.task);


        var count = $("#count").val();
        if (count == 0) {
            $("#editor-task").attr("contenteditable", false);
            $("#editor-answer").attr("contenteditable", false);
        }
        $("#checkbox").click(function () {
            if ($("#checkbox").is(":checked")) {
                $("#answer-box").show();
            } else {
                $("#answer-box").hide();
            }
        });
        $("#checkboxTitle").click(function () {
            if ($("#checkbox").is(":checked")) {
                $("#checkbox").attr("checked", false);
                $("#answer-box").hide();
            } else {
                $("#checkbox").attr("checked", true);
                $("#answer-box").show();
            }
        });
        $("#href1").attr("href", CONTEXT_PATH + "task/list?courseId=" + data.data.courseId);
        $("#href2").text(data.data.task.title);
    })

    var initDetail = function (view) {
        var taskType = getTaskType(view.type);
        $("input[name='hiddenType']").val(view.type);

        $("#task-type").text(taskType);
        // $("#edit-task-type").val(getType(view.type));
        $("#edit-task-type").val(view.type);
        $("#edit-task-name").text(isNull(view.title));
        $("input[name='detailTaskId']").val(view.id);
        $("#editor-task").html(isNull(view.description));
        $("#editor-answer").html(isNull(view.standardAnswer));
        initFileList(view.attachment.files, "attach", view.type);
        initFileList(view.answerAttachment.files, "anwserAttach", view.type);

        //新加
        $("#isSelect").val(view.isSelect);
        $("#task-full-mark").text(view.fullMark);

        // console.log("11111111  "+view.fullMark);
        if (view.isSelect) {
            //选择题
            $("#option").show();
            $("#scoreItems").hide();
            var options = JSON.parse(view.content);
            var str = "";
            for (var i = 0; i < options.length; i++) {
                str += ("<tr class=\"option\">");
                str += ("<td class=\"col-md-2\"><span style=\"font-weight:bold\">") + options[i].num + ("</span></td>");
                str += ("<td class=\"col-md-8\"><input class=\"form-control readonly\" name=\"optionItem\" readonly=\"readonly\" value=\"") + options[i].item + ("\"></td>");
                str += ("</tr>");
            }
            $("#optionList").append(str);

        } else {
            //非选择题
            $("#option").hide();
            $("#scoreItems").show();
            var str = "";
            for (var i = 0; i < view.scoreItems.length; i++) {
                str += ("<tr class=\"scoreItem\">");
                str += ("<td class=\"col-md-7\"><input class=\"form-control readonly\" name=\"scoreItem\" readonly=\"readonly\" value=\"")
                    + view.scoreItems[i].scoreItem + ("\"></td>");
                str += ("<td class=\"col-md-3\"><input class=\"form-control readonly\" name=\"scoreItemWeight\" readonly=\"readonly\" value=\"")
                    + view.scoreItems[i].weight + ("\"></td>");
                str += ("<td class=\"col-md-2\"></td>");
                str += ("</tr>");
            }
            $("#scoreItemList").append(str);
        }
        var str = "";

        for (var i = 0; i < view.courseTargets.length; i++) {
            if(view.courseTargets[i].weight!=0){
                str += ("<div>");
                str += ("<span style=\"font-weight:bold;display: inline-block;width: 40%\">课程目标") + (i + 1) + ("权重：</span>");
                str += ("<input type=\"text\" name=\"courseTargetId\" hidden=\"hidden\" value=\"") + view.courseTargets[i].courseTargetId + ("\">");
                str += ("<input class=\"form-control readonly\" style=\"display: inline-block;width: 30%\" name=\"weight\" readonly=\"readonly\" value=\"")
                    + view.courseTargets[i].weight + ("\">");
                str += ("</div>");
            }
        }
        $("#courseTarget-list").append(str);
    }


    var getTaskType = function (type) {
        if (type == "ASKINLESSON") {
            return "课堂提问";
        } else if (type == "TESTINLESSON") {
            return "当堂测试";
        } else if (type == "HOMEWORK") {
            return "课后作业";
        } else if (type == "LABTEST") {
            return "实验任务";
        } else {
            return "个人任务";
        }
    }

    function getType(type) {
        if (type == "ASKINLESSON") return 0;
        if (type == "TESTINLESSON") return 1;
        if (type == "HOMEWORK") return 2;
        if (type == "LABTEST") return 3;
        if (type == "PERSONALTASK") return 4;
    }

    var isNull = function (string) {
        if (string == null || string.trim() == "" || string.trim() == "<p><br></p>") {
            return "(没有提供描述)";
        } else {
            return string.trim();
        }
    }

    var addAttachment = function (attachType) {
        var taskType = $("input[name='hiddenType']").val();
        var id = "";
        if (attachType == "attach") {//附件
            id = "task-file-edit"
        } else {//答案
            id = "answer-file-edit"
        }
        $.ajaxFileUpload({
            url: CONTEXT_PATH + "resource/upload", //用于文件上传的服务器端请求地址
            secureuri: false, //是否需要安全协议，一般设置为false
            fileElementId: id, //文件上传域的ID
            dataType: 'json', //返回值类型 一般设置为json
            success: function (data, status) //服务器成功响应处理函数
            {
                if (data.status == "success") {
                    ajaxAddAttachment(data.data, attachType, taskType);
                } else {
                    alert(data.message);
                }
            },
            error: function (data, status, e)//服务器响应失败处理函数
            {
                alert(e);
            }
        });
    }

    var ajaxAddAttachment = function (data, attachType, taskType) {
        var id = $("input[name='detailTaskId']").val();
        var type = attachType == "attach" ? 1 : 2;
        var json = {
            id: id,
            type: type,
            name: data.name,
            key: data.key
        };

        $.post(CONTEXT_PATH + "task/ajaxAddAttachment", {
            data: JSON.stringify(json)
        }, function (data) {
            if (data.status == "success") {
                layer.msg("上传成功");
                initEditFileList(data.data.attachments, attachType);
            } else {
                alert(data.message);
            }
        });

    }

    var initEditFileList = function (list, attachType) {
        var obj = null;
        if (attachType == "attach") {
            obj = $("#task-file-list-edit");
        } else {
            obj = $("#answer-file-list-edit");
        }
        obj.empty();
        if (list.length <= 0) {
            var temp = "";
            temp += "<li class=\"no-attach\"><span>（未包含附件）</span></li>";
            obj.append(temp);
        } else {
            for (var i = 0; i < list.length; i++) {
                var temp = "";

                temp += ("<li><span>" + list[i].name + "</span>");
                temp += ("<button type=\"button\" style=\"display:block;\" class=\"btn btn-default\" onclick=\"deleteAttachment('" + list[i].url + "','" + attachType + "')\">删除</button></li>");

                obj.append(temp);
            }
        }
    }

    var deleteAttachment = function (key, attachType) {
        var type = attachType == "attach" ? 1 : 2;
        var json = {
            id: $("input[name='detailTaskId']").val(),
            type: type,
            key: key
        };

        $.post(CONTEXT_PATH + "task/ajaxDeleteAttachment", {
            data: JSON.stringify(json)
        }, function (data) {
            if (data.status == "success") {
                layer.msg("删除成功");
            } else {
                layer.msg("删除失败");
            }
        });
    }

    var initFileList = function (list, attachType) {
        var obj = null;
        if (attachType == "attach") {
            obj = $("#task-file-list-edit");
        } else {
            obj = $("#answer-file-list-edit");
        }
        obj.empty();
        if (list.length <= 0) {
            var temp = "";
            temp += "<li class=\"no-attach\"><span>（未包含附件）</span></li>";
            obj.append(temp);
        } else {
            for (var i = 0; i < list.length; i++) {
                var temp = "";
                temp += ("<li>");
                temp += ("<span>" + list[i].name + "</span>");
                // temp += ("<a id=\"download-url\" href=\"/CourseSupport/resource/download/" + list[i].url + "\">下载</a>");
                temp += ("<a id=\"download-url\" href=\"<c:url value='/resource/download/"+list[i].url+"'/>\">下载</a>");
                temp += ("<button type=\"button\" style=\"\" class=\"btn btn-default\" onclick=\"deleteAttachment('" + list[i].url + "','" + attachType + "')\" >删除</button>");
                temp += ("</li>");
                obj.append(temp);
            }
        }
    }
    var removeWu = function (string) {
        string = string.trim();
        if (string == "(无)<p><br></p>" || string.indexOf("(无)") != -1) {
            string = string.replace("(无)", "");
            return string.replace("<p><br></p>", "");
        } else {
            return string.replace("<p><br></p>", "");
        }

    }
    var updateTaskDetail = function (taskEdit, answerEdit) {
        // var type=$("input[name='hiddenType']").val();
        var title = $("#edit-task-name").text();
        var id = $("input[name='detailTaskId']").val();
        var description = removeWu(taskEdit);
        var standardAnswer = removeWu(answerEdit);
        var type = $("#edit-task-type").val();
        var isSelect = $("#isSelect").val();
        var fullMark =$("#task-full-mark").text();
        var contents = [];
        var scoreItems = [];
        var courseTargets = [];
        if ($("#isSelect").val()=="true") {
            //选择题
            var elements = document.getElementsByClassName("option");
            for (var i = 0; i < elements.length; i++) {
                var td = elements[i].getElementsByTagName("td");
                var num = td[0].getElementsByTagName("span")[0].textContent;
                var content = td[1].getElementsByTagName("input")[0].value;
                var item = {
                    // num: String.fromCharCode(i + 65),
                    num:num,
                    item: content
                }
                // console.log(item);
                contents.push(item);
            }
        } else {
            //非选择题
            var elements = document.getElementsByClassName("scoreItem");
            for (var i = 0; i < elements.length; i++) {
                var td = elements[i].getElementsByTagName("td");
                var scoreItem = td[0].getElementsByTagName("input")[0].value;
                var weight = td[1].getElementsByTagName("input")[0].value;
                var item = {
                    scoreItem: scoreItem,
                    weight: weight
                }
                scoreItems.push(item);
            }

        }
        var courseTargetId = $("#courseTarget-list input[name='courseTargetId']");
        var courseTargetWeight = $("#courseTarget-list input[name='weight']");
        var courseTargetWeightSum = 0;
        for (var i = 0; i < courseTargetId.length; i++) {

            var item = {
                courseTargetId: courseTargetId[i].value,
                weight: parseFloat(courseTargetWeight[i].value)
            };
            courseTargetWeightSum +=item.weight;
            courseTargets.push(item);
        }

        // console.log(courseTargetWeightSum)
        if(courseTargetWeightSum!=1){
            alert("课程目标权重和不为1，请重新输入！");
            location.reload();
        }else{
            var json = {
                id: id,
                title: title,
                description: description,
                standardAnswer: standardAnswer,
                type: type,
                //新加
                fullMark: fullMark,
                isSelect: isSelect,
                content: contents,
                scoreItems: scoreItems,
                courseTargets: courseTargets
            }

            var url = "";
            url = CONTEXT_PATH + "task/ajaxUpdate";
            $.post(url, {
                data: JSON.stringify(json)
            }, function (data) {
                if (data.status == "success") {
                    layer.msg("保存成功");
                    window.location.reload();
                } else {
                    layer.msg(data.message);
                }
            });
        }



        // console.log(json);


    }

    var chartDom1 = document.getElementById('graph1');
    var myChart1 = echarts.init(chartDom1);
    var option1;
    // console.log(allStuDatas)
    // console.log(classStuDatas)

    var classNamesArr = [];
    var classArr = [];
    for(let i=0;i<classStuDatas.length;i++){
        classNamesArr.push(classStuDatas[i].className);
        classArr.push(classAnalysis(classStuDatas[i].stuData))
    }
    // console.log(classArr)


    // classDatas.sort(function (a,b) {
    //     return b.avg - a.avg;
    // })
    allStuDatas.sort(function (a,b) {
        return b.score - a.score;
    })

    var stuDatasArr = [];

    for(let i=0;i<allStuDatas.length;i++){
        let arr = [];
        arr.push(i+1)
        arr.push(allStuDatas[i].score);
        stuDatasArr.push(arr);
    }

    var allAna = classAnalysis(allStuDatas);
    function classAnalysis(stuDatas) {
        var excellentRate = 0;
        var goodRate = 0;
        var passRate = 0;
        var failureRate = 0;
        for(let i=0;i<stuDatas.length;i++){
            if(stuDatas[i].score>=90){
                excellentRate++;
            }else if(stuDatas[i].score>=80){
                goodRate++;
            }else if(stuDatas[i].score>=60){
                passRate++;
            }else {
                failureRate++;
            }
        }

        excellentRate = excellentRate/stuDatas.length;
        goodRate = goodRate/stuDatas.length;
        passRate = passRate/stuDatas.length;
        failureRate = failureRate/stuDatas.length;

        var arr = [];
        arr.push(excellentRate);
        arr.push(goodRate);
        arr.push(passRate);
        arr.push(failureRate);
        return arr;
    }

    var classExcellentArr = [];
    var classExcellentNum = [];
    var classGoodArr = [];
    var classGoodNum = [];
    var classPassArr = [];
    var classPassNum = [];
    var classFailureArr = [];
    var classFailureNum = [];

    for(let i=0;i<classArr.length;i++){
        classExcellentArr.push(classArr[i][0]);
        classExcellentNum.push(classArr[i][0]*classStuDatas[i].stuData.length)
        classGoodArr.push(classArr[i][1])
        classGoodNum.push(classArr[i][1]*classStuDatas[i].stuData.length)
        classPassArr.push(classArr[i][2])
        classPassNum.push(classArr[i][2]*classStuDatas[i].stuData.length)
        classFailureArr.push(classArr[i][3])
        classFailureNum.push(classArr[i][3]*classStuDatas[i].stuData.length)
    }

    // console.log(classExcellentArr);
    // console.log(classExcellentNum);
    // console.log(classGoodArr)
    // console.log(classGoodNum)
    // console.log(classPassArr)
    // console.log(classPassNum)
    // console.log(classFailureArr)
    // console.log(classFailureNum)
    //
    // console.log(allAna)


    option1 = {
        xAxis: {
            name:'排名',
            splitLine: {
                lineStyle: {
                    type: 'dashed'
                }
            },
        },
        yAxis: {
            name:'分数',
            splitLine: {
                lineStyle: {
                    type: 'dashed'
                }
            },
        },
        title: {
            text: '排名-分数 散点图',
            left: 'center'
        },
        legend: {
            bottom: 10
        },
        tooltip: {
            trigger: 'item',
            axisPointer: {
                type: 'cross'
            }
        },
        series: [{
            color:'skyblue',
            name: courseName,
            type: 'scatter',
            symbolSize: 8,
            data: stuDatasArr
        }]
    };

    option1 && myChart1.setOption(option1);

    var chartDom2 = document.getElementById('graph2');
    var myChart2 = echarts.init(chartDom2);
    var option2;

    option2 = {
        title: {
            text: '统计-占比 饼状图',
            left: 'center'
        },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            bottom: 10
        },
        color : [ '#91cc75','#5470c6',  '#fac858', '#ee6666', '#73c0de','#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'],
        series: [
            {
                type: 'pie',
                radius: '50%',
                data: [
                    {value: allAna[0], name: '优秀率'},
                    {value: allAna[1], name: '良好率'},
                    {value: allAna[2], name: '合格率'},
                    {value: allAna[3], name: '不及格率'},
                ],
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };

    option2 && myChart2.setOption(option2);

    var chartDom3 = document.getElementById('graph3');
    var myChart3 = echarts.init(chartDom3);
    var option3;

    option3 = {
        title: {
            text: '优秀人数-优秀率 柱状图',
            left: 'center'
        },
        color :['skyblue','pink'],
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                crossStyle: {
                    color: '#999'
                }
            }
        },
        toolbox: {
        },
        legend: {
            bottom: 10
        },
        xAxis: [
            {
                type: 'category',
                data: classNamesArr,
                axisPointer: {
                    type: 'shadow'
                }
            }
        ],
        yAxis: [
            {
                type: 'value',
                name: '优秀人数',
                min: 0,
                max: allStuDatas.length,
                axisLabel: {
                    formatter: '{value}'
                }
            },
            {
                type: 'value',
                name: '优秀率',
                min: 0,
                max: 1,
                axisLabel: {
                    formatter: '{value}'
                }
            }
        ],

        series: [
            {
                name: '优秀人数',
                type: 'bar',
                data: classExcellentNum
                    // [
                    // {value:5.9,
                    //     itemStyle: {
                    //         color: '#5470c6'
                    //     }},{value:35.9,
                    //     itemStyle: {
                    //         color: '#91cc75'
                    //     }}, {value:15.9,
                    //     itemStyle: {
                    //         color: '#fac858'
                    //     }}, {value:25.9,
                    //     itemStyle: {
                    //         color: '#ee6666'
                    //     }}, {value:70.7,
                    //     itemStyle: {
                    //         color: '#73c0de'
                    //     }}, 2.6,175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
            },
            {
                name: '优秀率',
                type: 'line',
                yAxisIndex: 1,
                data: classExcellentArr
            }
        ]
    };

    option3 && myChart3.setOption(option3);

    var chartDom4 = document.getElementById('graph4');
    var myChart4 = echarts.init(chartDom4);
    var option4;

    option4 = {
        title: {
            text: '良好人数-良好率 柱状图',
            left: 'center'
        },
        color :['skyblue','pink'],
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                crossStyle: {
                    color: '#999'
                }
            }
        },
        toolbox: {
        },
        legend: {
            bottom: 10
        },
        xAxis: [
            {
                type: 'category',
                data: classNamesArr,
                axisPointer: {
                    type: 'shadow',
                }
            }
        ],
        yAxis: [
            {
                type: 'value',
                name: '良好人数',
                min: 0,
                max: allStuDatas.length,
                axisLabel: {
                    formatter: '{value}',
                },
            },
            {
                type: 'value',
                name: '良好率',
                min: 0,
                max: 1,
                axisLabel: {
                    formatter: '{value}'
                }
            }
        ],
        series: [
            // {
            //     name: '蒸发量',
            //     type: 'bar',
            //     data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
            // },
            {
                name: '良好人数',
                type: 'bar',
                data: classGoodNum,

            },
            {
                name: '良好率',
                type: 'line',
                yAxisIndex: 1,
                data: classGoodArr
            }
        ]
    };

    option4 && myChart4.setOption(option4);

    var chartDom5 = document.getElementById('graph5');
    var myChart5 = echarts.init(chartDom5);
    var option5;

    option5 = {
        title: {
            text: '合格人数-合格率 柱状图',
            left: 'center'
        },
        color :['skyblue','pink'],
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                crossStyle: {
                    color: '#999'
                }
            }
        },
        toolbox: {
        },
        legend: {
            bottom: 10
        },
        xAxis: [
            {
                type: 'category',
                data: classNamesArr,
                axisPointer: {
                    type: 'shadow',
                }
            }
        ],
        yAxis: [
            {
                type: 'value',
                name: '合格人数',
                min: 0,
                max: allStuDatas.length,
                axisLabel: {
                    formatter: '{value}',
                },
            },
            {
                type: 'value',
                name: '合格率',
                min: 0,
                max: 1,
                axisLabel: {
                    formatter: '{value}'
                }
            }
        ],
        series: [
            // {
            //     name: '蒸发量',
            //     type: 'bar',
            //     data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
            // },
            {
                name: '合格人数',
                type: 'bar',
                data: classPassNum

            },
            {
                name: '合格率',
                type: 'line',
                yAxisIndex: 1,
                data: classPassArr
            }
        ]
    };

    option5 && myChart5.setOption(option5);

    var chartDom6 = document.getElementById('graph6');
    var myChart6 = echarts.init(chartDom6);
    var option6;

    option6 = {
        title: {
            text: '不及格人数-不及格率 柱状图',
            left: 'center'
        },
        color :['skyblue','pink'],
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                crossStyle: {
                    color: '#999'
                }
            }
        },
        toolbox: {
        },
        legend: {
            bottom: 10
        },
        xAxis: [
            {
                type: 'category',
                data: classNamesArr,
                axisPointer: {
                    type: 'shadow',
                }
            }
        ],
        yAxis: [
            {
                type: 'value',
                name: '不及格人数',
                min: 0,
                max: allStuDatas.length,
                axisLabel: {
                    formatter: '{value}',
                },
            },
            {
                type: 'value',
                name: '不及格率',
                min: 0,
                max: 1,
                axisLabel: {
                    formatter: '{value}'
                }
            }
        ],
        series: [

            {
                name: '不及格人数',
                type: 'bar',
                data: classFailureNum

            },
            {
                name: '不及格率',
                type: 'line',
                yAxisIndex: 1,
                data: classFailureArr
            }
        ]
    };

    option6 && myChart6.setOption(option6);

</script>
</html>
